<template>
  <div class="addquestion-page">
    
    <CommonHeader leftIcon :title="title" />
    <div class="addquestion-content">
      <div class="addquestion-row">
        <div class="addquestion-row-c1">用户名</div>
        <div class="addquestion-row-c2">{{ yhm }}</div>
      </div>
      <div class="addquestion-row">
        <div class="addquestion-row-c1">联系方式</div>
        <div class="addquestion-row-c2"><input type="text" v-model="lxfs"></div>
      </div>
      <div class="addquestion-row">
        <div class="addquestion-row-c1">问题描述</div>
        <div class="addquestion-row-c2"><input type="text" v-model="wtms" placeholder="请输入问题"></div>
      </div>
      <div class="addquestion-row addquestion-row-img">
        <div class="addquestion-row-c1">问题截图</div>
        <div class="addquestion-row-c2">
          <div>
            <!-- 文件选择输入框 -->
            <input
                type="file"
                accept="image/*"
                @change="onFileChange"
                ref="fileInput"
                style="display: none;"
                :disabled="!isshow"
            />
            <img :src="imageUrl" @click="buttonClick()" style="max-width: 100%; max-height:500px;"/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="addquestion-button" @click="submit()" v-show="isshow">提交</div>
</template>
<script setup>
import '@/views/handbook/css/AddQuestionPage.css'
import uiUtil from "@/util/UiUtil.js";
import {ref, onMounted, inject, provide} from "vue";
import {useRouter, useRoute} from 'vue-router';
import uploadIcon from '@/assets/img/main/add_img.png';

const router = useRouter();
const onClickLeft = () => {
  router.back()
}
//////////////详情查看///////////////////////////
const title=uiUtil.ref('添加')
const isshow=uiUtil.ref(true)
var pageData=null
console.log('pageData=', pageData)
const dataInfo = () => {
  pageData=router.currentRoute.value.query.data
  if (uiUtil.isStrNull(pageData))return
  pageData=JSON.parse(router.currentRoute.value.query.data)
  yhm.value = pageData.userName
  lxfs.value=pageData.phone
  wtms.value=pageData.description
  imageUrl.value=pageData.content
  isshow.value=false
  title.value='详情查看'
}
///////////////////////////////////
var pagetype=''
onMounted(() => {
  // debugger
  pagetype=router.currentRoute.value.query.pagetype
  if ('add'==pagetype){
    isshow.value=true
  }else{
    dataInfo()
    isshow.value=false
  }

})
var user = JSON.parse(localStorage.getItem(uiUtil.urlPath.keys.user))
// console.log('user=', user)

const yhm = uiUtil.ref(user.UserLoginName)
const lxfs = uiUtil.ref(user.LinkmanPhone)
const wtms = uiUtil.ref('')
const img = uiUtil.ref(uploadIcon)


const imageUrl = ref(uploadIcon);
const fileInput = ref(null);


const onFileChange = (event) => {
  // console.log('event=', event)
  const file = event.target.files[0]; // 获取选中的文件
  // console.log('file=', file)
  if (file && file.type.startsWith('image/')) {
    // console.log('if')
    // 创建一个 URL 以便在 img 元素中使用
    imageUrl.value = URL.createObjectURL(file);
    // uploadFile(file);
    uploadFile2(file);
  } else {
    // console.log('else')
    imageUrl.value = null;
  }
  // console.log('imageUrl.value=', imageUrl.value)
};


const buttonClick = () => {
  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',fileInput.value)
  fileInput.value.click();
}

const fileD = ref({});
const uploadFile2 = (file) => {
  uiUtil.http().postConfig({
    config: {
      url: '/api/seedarchive/file/batchUploadGenerateDate',
      data: {
        files: file,
        serviceName: 'seedarchive',
        abc:'nihao'
      },
      contentType: 'multipart/form-data',
    },
    succeed: (res) => {
      // debugger
      if (200 != res.code) {
        uiUtil.toastFail(res.msg)
        return
      }
      if (0==uiUtil.arrLength(res.data)) {
        uiUtil.toastFail('上传失败')
        return
      }
      fileD.value = res.data[0]
      console.log('file.value=',fileD.value, res.data[0])
    },
    failed: (res) => {
      uiUtil.toastFail(res)
    }
  })
}

const submit = () => {
  if (uiUtil.isStrNull(wtms.value)) {
    uiUtil.toastFail('请输入问题描述')
    return
  }
  if (uiUtil.isStrNull(lxfs.value)) {
    uiUtil.toastFail('请输入联系方式')
    return
  }

  if (uiUtil.isObjNull(fileD.value)) {
    uiUtil.toastFail('请上传截图')
    return
  }

  uiUtil.http().postObj({
    url: '/api/seedarchive/appHelperQuestion/addAppHelperQuestion',
    data: {
      content: fileD.value.url,
      description:wtms.value,
      phone:lxfs.value,
      userID: user.UserID,
      userName:yhm.value
    },
    succeed: (res) => {
      // debugger
      if (200 != res.code) {
        uiUtil.toastFail(res.msg)
        return
      }
      uiUtil.toastSuccess(res.msg)
      router.back()
    },
    failed: (res) => {
      uiUtil.toastFail(res)
    }
  })
}

</script>
<style scoped lang="less">

</style>